<template>
    <div>
        <n-card :bordered="false">
            <!-- 页面标题和操作栏 -->
            <div class="header-bar">
                <h2>路径添加</h2>
                <n-button type="primary" :loading="loading" @click="handleAddsimulation">添加路径</n-button>
            </div>

            <n-data-table :loading="loading" :columns="columns" :data="dataList" :pagination="pagination" />

            <n-flex justify="end">
                <n-button class="text_size" type="info" :loading="loading" @click="fetchList">刷新数据</n-button>
                <n-select class="text_size" v-model:value="pagination.pageSize" :options="options" />
            </n-flex>
        </n-card>
    </div>
</template>

<script setup>
import axios from "axios";
import { ref, h, onMounted } from "vue";
import { NCard, NTag, NInputNumber, NButton, NSelect, NFlex, NDataTable, NLayout, useMessage } from "naive-ui";
import { API_URLS } from '../../utils/apiConfig';
import { useRouter } from 'vue-router';

const message = useMessage();
const router = useRouter();

// 节点名称映射
const nodeMapZh = ref({});

//每页显示数据 选择项
const options = [
    { label: "5条/页", value: 5, },
    { label: "10条/页", value: 10, },
    { label: "20条/页", value: 20, },
];

// 分页参数
const pagination = ref({ pageSize: 10, });

// 状态管理
const loading = ref(false);

// 参数datatable
const dataList = ref([]);

// 获取列表所有数据
const fetchList = async () => {
    loading.value = true;

    try {
        const response = await axios.get(API_URLS.map_edge.list, { params: {} });

        if (response.data.code === 200) {
            dataList.value = response.data.data;
        } else {
            message.error(`获取数据失败: ${response.data.msg || "未知错误"}`);
        }
    } catch (err) {
        message.error(`网络错误: 无法连接到服务器 (${err.message})`);
    } finally {
        loading.value = false;
    }
};

// 获取节点名称列表
const get_node_options = async () => {
    try {
        const response = await axios.get(API_URLS.map_node.nodeNameList);
        if (response.data.code === 200) {
            nodeMapZh.value = response.data.data.reduce((acc, item) => ({ ...acc, [item[0]]: item[1] }), {});
            // 为每个数据项添加节点名称
            dataList.value.forEach(item => {
                item.node_from_name = nodeMapZh.value[item.node_from_id] || item.node_from_id;
                item.node_to_name = nodeMapZh.value[item.node_to_id] || item.node_to_id;
            });
        } else {
            message.error(`获取节点名称列表失败: ${response.data.msg}`);
        }
    } catch (error) {
        message.error("获取节点名称列表失败: " + error.message);
    }
}

// 初始化页面
onMounted(async () => {
    await fetchList();
    await get_node_options();
});

// 表格数据 列
const columns = [
    { title: "id", key: "id" },
    { title: "起点", key: "node_from_name" },
    { title: "终点", key: "node_to_name" },
    { title: "距离", key: "distance" },
    { title: "描述", key: "description" },
    { title: "权重", key: "weight" },
    { title: "是否占用", key: "occupied" },
    {
        title: "删除",
        key: "delete",
        render(row) {
            return h(
                NButton,
                {
                    strong: true,
                    tertiary: true,
                    size: "small",
                    type: "error",
                    onClick: () => delete_row(row.id),
                },
                { default: () => "删除" }
            );
        },
    },
];

async function delete_row(id) {
    loading.value = true;

    try {
        const response = await axios.delete(`${API_URLS.map_edge.delete}/${id}`);

        if (response.data.code === 200) {
            console.log(response.data.msg);
        } else {
            message.error(`获取数据失败: ${response.data.msg || "未知错误"}`)
        }
    } catch (err) {
        message.error(`网络错误: 无法连接到服务器 (${err.message})`);
    } finally {
        loading.value = false;
        //重新加载数据
        fetchList();
    }
}

// 新增仿真
const handleAddsimulation = () => {
    router.push("/AGV/AGV_setting");
};

</script>

<style scoped>
.text_size {
    width: 120px;
    height: 30px;
    text-align: center;
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
</style>
